<link rel="stylesheet" type="text/css" href="__PUBLIC__/style/html.css"/>
                        	<div class="jqueryTitle mt5">
                            	<span>说明</span>
                            </div>
                            <div class="p15">
                            	以下排版都是自己经常用到的和网上看到好看的收藏下来的，希望对你有所帮助
                            </div>                        
                            <div class="jqueryTitle mt5">
                            	<span>演示效果</span>
                            </div>
                            <div class="p15">
                            	<div class="pt15"><strong>标准图片切换排版</strong></div>
                                
                                <p>CSS</p>
                                <pre>.lin_thumb_container{width:200px; height:125px; border:1px solid #CCC; overflow:hidden; margin:0px auto; position:relative;}
.lin_thumb_change{position:absolute; left:0px; top:0px; z-index:1;}
.lin_thumb_change li{float:left; width:200px;height:125px;}
.lin_thumb_nav{position:absolute; z-index:2; right:0px; bottom:10px;}
.lin_thumb_nav li{float:left; display:inline; margin-right:10px; width:8px; height:8px; background-color:#333;}.lin_thumb_nav li.current{background-color:#666;}
.lin_thumb_btnPre,.lin_thumb_btnNext{position:absolute; z-index:4; background-color:#EEE; padding:5px; color:#666666; top:45px;}
.lin_thumb_btnNext{right:1px;}
.lin_thumb_btnPre{left:1px;}
</pre>
                                
								<div class="blank10"></div>
                               	<div class="lin_thumb_container">
            						<a href="javascript:void(0);" title="上一张" class="lin_thumb_btnPre"><</a>
                					<a href="javascript:void(0);" title="下一张" class="lin_thumb_btnNext">></a>
                                	<ul class="lin_thumb_nav">
                                    	<li class="current"></li>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                    </ul>
                                	<ul class="lin_thumb_change">
                						<li><img src="__PUBLIC__/images/html/a.gif"  alt="图片一"/></li>
                    					<li><img src="__PUBLIC__/images/html/b.gif"  alt="图片二"/></li>
                						<li><img src="__PUBLIC__/images/html/a.gif"  alt="图片一"/></li>
                    					<li><img src="__PUBLIC__/images/html/b.gif"  alt="图片二"/></li>                                        
                                    </ul>
                                </div>
                                
								<div class="pt15"><strong>图文排版（左图，右标题和简单介绍）</strong></div>
                                
                                <p>CSS</p>
                                <pre>.lin_imageText{width:400px; margin:0px auto;}
.lin_imageText dt{float:left; display:inline; width:200px; height:125px;}
.lin_imageText dd{float:left; display:inline; height:125px;width:190px; color:#333; padding-left:10px; font-size:12px;}
.lin_imageText dd a{font-size:14px;}</pre>
                                
								<div class="blank10"></div>
                               	<dl class="lin_imageText clearfix">
                                	<dt><a href="javascript:void(0);" title="图"><img src="__PUBLIC__/images/html/a.gif"  alt="图片一"/></a></dt>
                                    <dd>
                                    	<h4><a href="javascript:void(0);" title="林氏智造-专注网站建设">林氏智造-专注网站建设</a></h4>
                                        <p>
                                        	林氏智造-专注网站建设,关注PHP开发,前端开发,网站运维,用户体验的专业博客
                                        </p>
                                    </dd>
                                </dl>
                                
								<div class="pt15"><strong>Tab切换排版</strong></div>
                                
                                <p>CSS</p>
                                <pre>.lin_tab{border:1px solid #d1d1d1; width:220px;margin:0px auto;}
.lin_tabNav li{float:left; display:inline; height:29px; line-height:29px; background-color:#efefef; width:110px; text-align:center; border-bottom:1px solid #d1d1d1;}
.lin_tabNav li.current{background-color:#666; color:#FFF; border-bottom:none; height:30px;}
.lin_tabContent_sub{padding:10px; display:none;}</pre>
                                
								<div class="blank10"></div>
                            	<div class="lin_tab">
                                	<ul class="lin_tabNav clearfix">
                                    	<li class="current">林氏智造</li>
                                        <li>jquery插件大全</li>
                                    </ul>
                                    <div class="lin_tabContent">
                                    	<div class="lin_tabContent_sub" style="display:block;">林氏智造-专注网站建设,用智力创造生活</div>
                                        <div class="lin_tabContent_sub">jquery插件大全</div>
                                    </div>
                                </div>

								<div class="pt15"><strong>社交按钮</strong></div>
                                
                                <p>CSS</p>
                                <pre>.lin_sns li{color: #999999;display: inline;float: left;height: 34px;line-height: 34px;margin-right: 8px;}
.lin_sns_ico{background: url(htmlImages/flow_ico.jpg) no-repeat scroll 0 0 transparent;display: block;height: 34px;width: 35px;}
.lin_sns_ico_sina{background-position: -5px -6px;height: 34px;width: 35px;}
.lin_sns_ico_qwei{background-position: -43px -6px;height: 34px;width: 36px;}
.lin_sns_ico_qq{background-position: -82px -6px;height: 34px;width: 35px;}
.lin_sns_ico_douban{background-position: -120px -6px;height: 34px;width: 36px;}
.lin_sns_ico_kaixin{background-position: -159px -6px;height: 34px;width: 35px;}
.lin_sns_ico_renren{background-position: -198px -6px;height: 34px; width: 35px;}</pre>
                                
								<div class="blank10"></div>
								<ul class="lin_sns clearfix"><li>分享到：</li><li><a data_type="qq" class="lin_sns_ico lin_sns_ico_qwei" href="javascript:;"></a></li><li><a data_type="zone" class="lin_sns_ico lin_sns_ico_qq" href="javascript:;"></a></li><li><a data_type="sina" class="lin_sns_ico lin_sns_ico_sina" href="javascript:;"></a></li><li><a data_type="kaixin" class="lin_sns_ico lin_sns_ico_kaixin" href="javascript:;"></a></li><li><a data_type="renren" class="lin_sns_ico lin_sns_ico_renren" href="javascript:;"></a></li><li><a data_type="douban" class="lin_sns_ico lin_sns_ico_douban" href="javascript:;"></a></li></ul>
                                
                                <div class="pt15"><strong>带时间和图标的新闻列表</strong></div>
                                
                                <p>CSS</p>
                                <pre>.lin_article{width:300px; margin:0px auto;}
.lin_article li{background: url(htmlImages/san.png) no-repeat scroll 0px 9px;height: 22px;line-height: 22px;overflow: hidden;padding-left: 10px;}
.lin_article li span{float:right; color:#999;}</pre>
                                
								<div class="blank10"></div>
								<ul class="lin_article">
                                	<li>
                                    	<span>2012-03-2</span>
                                        <a href="javascript:void(0);" title="土豪！我们做朋友吧！">土豪！我们做朋友吧！</a>
                                    </li>
                                	<li>
                                    	<span>2012-04-2</span>
                                        <a href="javascript:void(0);" title="林氏智造-专注网站建设">林氏智造-专注网站建设</a>
                                    </li>
                                	<li>
                                    	<span>2012-05-2</span>
                                        <a href="javascript:void(0);" title="【原创】常用的HTML结构">【原创】常用的HTML结构</a>
                                    </li>                                                                        
                                </ul>                                                                
                                
                                
                                                                
                            	                             
                                
                            </div>  
                        
